<template>
  <div class="login">
    <a-form @submit.prevent="doLogin" :autoFormCreate="(form) => this.form = form">
      <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;"></a-alert>
        <a-form-item>
          <div class="top-logo">
            <i class="iconfont icon-denglu-logo"></i>
          </div>
        </a-form-item>
        <a-form-item
          fieldDecoratorId="name"
          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}">
          <a-input size="large">
            <a-icon slot="prefix" type="user"></a-icon>
          </a-input>
        </a-form-item>
        <a-form-item
          fieldDecoratorId="password"
          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}">
          <a-input size="large" type="password">
            <a-icon slot="prefix" type="lock"></a-icon>
          </a-input>
        </a-form-item>
      <a-form-item>
        <a-button :loading="loading" style="width: 100%; margin-top: 4px" size="large" htmlType="submit" type="primary">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  name: 'Login',
  data () {
    return {
      loading: false,
      error: ''
    }
  },
  created () {
    this.$db.clear()
    this.$router.options.routes = []
  },
  methods: {
    doLogin () {
      this.form.validateFields(['name', 'password'], (errors, values) => {
        if (!errors) {
          this.loading = true
          let name = this.form.getFieldValue('name')
          let password = this.form.getFieldValue('password')
          this.$post('login', {
            username: name,
            password: password
          }).then((r) => {
            let data = r.data.data
            this.saveLoginData(data)
            setTimeout(() => {
              this.loading = false
            }, 500)
            this.$router.push('/')
          }).catch(() => {
            setTimeout(() => {
              this.loading = false
            }, 500)
          })
        }
      })
    },
    ...mapMutations({
      setToken: 'account/setToken',
      setExpireTime: 'account/setExpireTime',
      setPermissions: 'account/setPermissions',
      setRoles: 'account/setRoles',
      setUser: 'account/setUser',
      setTheme: 'setting/setTheme',
      setLayout: 'setting/setLayout',
      setMultipage: 'setting/setMultipage',
      fixSiderbar: 'setting/fixSiderbar',
      fixHeader: 'setting/fixHeader',
      setColor: 'setting/setColor'
    }),
    saveLoginData (data) {
      this.setToken(data.token)
      this.setExpireTime(data.exipreTime)
      this.setUser(data.user)
      this.setPermissions(data.permissions)
      this.setRoles(data.roles)
      this.setTheme(data.config.theme)
      this.setLayout(data.config.layout)
      this.setMultipage(data.config.multiPage === '1')
      this.fixSiderbar(data.config.fixSiderbar === '1')
      this.fixHeader(data.config.fixHeader === '1')
      this.setColor(data.config.color)
    }
  }
}
</script>

<style lang="less" scoped>
  .login {
    padding: 20px;
    background: #102848;
    border-radius: 4px;
    .top-logo {
      text-align: center;
      padding-top: 40px;
      i {
        font-size: 100px;
        color: #ffffff;
      }
    }
    .icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }
  }
</style>
